<template>
	<el-card class="box-card">
		<div slot="header" class="clearfix">
			<span>公告列表</span>
		</div>
		<el-table :data="tableData">
			<el-table-column prop="notice_id" label="#" width="50"></el-table-column>
			<el-table-column prop="title" label="标题" width="300"></el-table-column>
			<el-table-column prop="create_time" label="发布日期"></el-table-column>
			<el-table-column prop="update_time" label="更新日期"></el-table-column>
			<el-table-column label="是否置顶">
				<template slot-scope="scope">
					<el-tag v-if="scope.row.is_sticky === 1" type="success">置顶</el-tag>
					<el-tag v-if="scope.row.is_sticky === 0" type="info">正常</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="300">
				<!-- 复杂结构的固定写法：slot-scope="scope" -->
				<template slot-scope="scope">
					<el-link :href="`#/notice/edit/${scope.row.notice_id}`" class="edit-link">
						<el-button v-permission="'notice:list:edit'" type="primary" plain icon="el-icon-edit">编辑</el-button>
					</el-link>
					<el-button v-permission="'notice:list:switch'" v-if="scope.row.is_sticky === 0" type="success" plain
						icon="el-icon-top" @click="handleTop(scope.row.notice_id, scope.$index)">置顶</el-button>
					<el-button v-permission="'notice:list:switch'" v-if="scope.row.is_sticky === 1" type="info" plain
						icon="el-icon-video-pause" @click="handleCancel(scope.row.notice_id, scope.$index)">
						取消
					</el-button>
					<el-button v-permission="'notice:list:remove'" type="danger" plain icon="el-icon-delete"
						@click="handleRemove(scope.row.notice_id, scope.$index)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
	</el-card>
</template>

<script>
import { Notice } from '@/api';
export default {
	name: 'List',
	data() {
		return {
			tableData: [],
		}
	},
	// 在created或mounted发送ajax请求(通过调用函数)
	created() {
		document.title = "公告列表页";
		this.loadList();
	},
	methods: {
		// 一般将发送AJAX写到methods中
		// 加载列表
		async loadList() {
			let { status, msg, data } = await Notice.list({ pagesize: 10, pageindex: 1 });
			if (status) {
				this.tableData = data;
			} else {
				this.$message.error(msg);
			}
		},
		// 置顶提示
		handleTop(notice_id, index) {
			this.$confirm('此操作将置顶该公告, 是否继续?', '提示', { type: 'warning' })
				.then(async () => {
					let { status, msg } = await Notice.stick({ notice_id: notice_id, is_sticky: 1 });
					if (status) {
						// 操作DOM
						this.tableData[index].is_sticky = 1;
						// 多个置顶按照更新时间降序排列
						// this.tableData.sort(function(noticeA, noticeB) {
						// 	if (noticeA.is_sticky === 1 && noticeB.is_sticky === 1) {
						// 		return new Date(noticeB.update_time) - new Date(noticeA.update_time);
						// 	}
						// });
						// 消息提示
						this.$message.success(msg);
					}
				}).catch(() => {
					this.$message.info("已取消该操作!");
				});
		},
		// 取消置顶
		handleCancel(notice_id, index) {
			this.$confirm('此操作将取消置顶, 是否继续?', '提示', { type: 'warning' })
				.then(async () => {
					let { status, msg } = await Notice.stick({ notice_id: notice_id, is_sticky: 0 });
					if (status) {
						// 操作DOM
						this.tableData[index].is_sticky = 0;
						// 多个置顶按照更新时间降序排列
						// 消息提示
						this.$message.success(msg);
					}
				}).catch(() => {
					this.$message.info("已取消该操作!");
				});
		},
		// 删除
		handleRemove(id, index) {
			this.$confirm('是否删除该公告?', '提示', { type: 'error' })
				.then(async () => {
					let { status, msg } = await Notice.remove({ notice_id: id });
					if (status) {
						// 操作DOM
						this.tableData.splice(index, 1);
						// 消息提示
						this.$message.success(msg);
					} else {
						this.$message.error(msg);
					}
				}).catch(() => {
					this.$message.info("已取消该操作!");
				});
		}
	},

}
</script>

<style lang="less" scoped>
.el-tag {
	margin-right: 10px;
}

.cell a {
	margin-right: 10px;
}
</style>
